/* ============================================================
   MNTR Design System — Colors & Type
   "Information is free. Perspective is the product."
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Aeonik Pro";
  src: url("./fonts/AeonikPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("./fonts/AeonikPro-Light.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("./fonts/HostGrotesk.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("./fonts/InterTight.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Primary
     ============================================================ */
  --mntr-green:       #20C462;   /* Deployment accent */
  --mntr-grey:        #191919;   /* Ground / type / surface dark */
  --system-white:     #FFFFFF;   /* The system carrier */

  /* ---------- Secondary ---------- */
  --mntr-yellow:      #EFE054;   /* Legacy OS */
  --mntr-aqua:        #CAE5DF;   /* Operator OS */
  --mntr-slate:       #7A878C;   /* Quiet metadata */
  --mntr-deep-green:  #0E443A;   /* Heritage / depth surface */

  /* ---------- Tints (engineered, not invented) ---------- */
  --grey-950: #0B0B0B;
  --grey-900: #191919;
  --grey-800: #262626;
  --grey-700: #3A3A3A;
  --grey-600: #5A5A5A;
  --grey-500: #7A878C;   /* = slate */
  --grey-400: #9CA4A8;
  --grey-300: #C2C8CB;
  --grey-200: #E2E5E7;
  --grey-100: #F1F2F3;
  --grey-050: #F8F8F7;

  /* ============================================================
     SEMANTIC — Foreground / Background
     ============================================================ */
  --bg-1:   var(--system-white);
  --bg-2:   var(--grey-050);
  --bg-3:   var(--grey-100);
  --bg-inverse: var(--mntr-grey);

  --fg-1:   var(--mntr-grey);     /* primary text */
  --fg-2:   var(--grey-700);      /* secondary text */
  --fg-3:   var(--mntr-slate);    /* metadata, captions */
  --fg-4:   var(--grey-400);      /* faint / disabled */
  --fg-inverse: var(--system-white);

  --line-1: var(--grey-200);      /* hairline divider */
  --line-2: var(--grey-300);      /* card border */
  --line-strong: var(--mntr-grey);

  --accent: var(--mntr-green);
  --accent-fg: var(--mntr-grey);  /* text on green */
  --accent-deep: var(--mntr-deep-green);

  /* ============================================================
     VERTICAL COLOR CODING
     ============================================================ */
  --vertical-authority: var(--mntr-deep-green); /* Authority OS */
  --vertical-legacy:    var(--mntr-yellow);  /* Legacy OS */
  --vertical-operator:  var(--mntr-aqua);    /* Operator OS */

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --font-display: "Aeonik Pro", "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-cta:     "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace;

  /* ---------- Type scale (1920-grid, fluid via clamp where useful) ---------- */
  --fs-display-xl: 96px;     /* hero deploy */
  --fs-display-l:  72px;
  --fs-display:    56px;
  --fs-h1:         44px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;     /* uppercase tracked label */

  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-body:    1.55;
  --lh-tight:   1.25;

  --tracking-display: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-body:    -0.005em;
  --tracking-eyebrow: 0.14em;

  --weight-light:  300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ============================================================
     SPACING — 4px base, architectural rhythm
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ============================================================
     RADII — minimal, engineered. Sharp by default.
     ============================================================ */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION — restrained. Use borders before shadows.
     ============================================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(25,25,25,0.04), 0 0 0 1px rgba(25,25,25,0.06);
  --shadow-2: 0 1px 2px rgba(25,25,25,0.06), 0 0 0 1px rgba(25,25,25,0.08);
  --shadow-3: 0 8px 24px -8px rgba(25,25,25,0.10), 0 0 0 1px rgba(25,25,25,0.06);
  --shadow-inverse: 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(255,255,255,0.08);

  /* ============================================================
     MOTION — measured, never bouncy
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.2, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.6, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max: 1280px;
  --gutter:        var(--space-7);
  --grid-cols:     12;
}

/* ============================================================
   ELEMENT DEFAULTS — semantic styles
   ============================================================ */
html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "ss01" 1; }

h1, h2, h3, h4, .display, .display-l, .display-xl {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
}

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.display    { font-size: var(--fs-display);    line-height: var(--lh-display); letter-spacing: var(--tracking-display); }

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-tight); font-weight: var(--weight-regular); }

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.body-l { font-size: var(--fs-body-l); line-height: var(--lh-body); color: var(--fg-2); }
.body-s { font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--fg-3);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 0.05em 0.35em;
  border-radius: var(--radius-1);
}

/* Wordmark style helper — "mntr." with deployment-cue period */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
.wordmark .period { color: var(--mntr-green); }

/* Selection */
::selection { background: var(--mntr-green); color: var(--mntr-grey); }